<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Meta examples</title>

    <meta name="author" content="Chris Mills">
    <meta name="description" content="This is an example page to demonstrate usage of metadata on web pages.">

    <meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.png">
    <meta property="og:description" content="This is an example page to demonstrate usage of metadata on web pages.">
    <meta property="og:title" content="Metadata; The HTML &lt;head&gt;, on MDN">

    <link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon">

    <link rel="stylesheet" href="styles/styless.css">
    <!--<script src="script.js" defer></script>-->
    <title>开始学习 CSS</title>


</head>
<body>
<!-- 手机框 -->
<div class="div1">

    <!-- 聊天部分 -->
    <div class="div2">
        <!-- 联系人 -->
        <div class="more">
            <!-- 状态栏 -->
            <div class="top">
                <!-- 摄像头 -->
                <div class="holl"></div>
            </div>

            <div class="user">
                <img src="./images/fh.png" alt="" class="re">
                <span class="name">秦甜甜</span>
                <img src="./images/gd.png" alt="" class="point">
            </div>
        </div>

        <!-- 聊天框 -->
        <div class="div4">
            <!-- 对方的消息 -->
            <div class="send">
                <!-- 时间 -->
                <div class="time">
                    <p>上午 10:15</p>
                </div>

                <!--对方头像 -->
                <img src="./images/tx1.jpg" class="i"></img>
                <!-- 信息内容 -->
                <xiaoxi>还原色</xiaoxi>
            </div>

            <!-- 回复消息 -->
            <div class="reply">
                <!-- 时间 -->
                <div class="time">
                    <p>上午 10:20</p>
                </div>

                <!--我方头像 -->
                <img src="./images/tx2.jpg" class="i"></img>
                <!-- 信息内容 -->
                <span>好的</span>
            </div>

            <!-- 对方的消息 -->
            <div class="send">
                <!--对方头像 -->
                <img src="./images/tx1.jpg" class="i"></img>
                <!-- 信息内容 -->
                <xiaoxi>快来快来</xiaoxi>
            </div>
        </div>

    </div>

    <!-- 下面功能栏 -->
    <div class="div3">

        <!-- 这个是输入 -->
        <div class="div5">
            <img src="./images/yuyinshuru.png" class="i1">
            <input type="text" class="i3">
            <img src="./images/bq.png" class="i4">
            <img src="./images/jh.png" class="i2">
            <button class="i5">发送</button>
        </div>

        <!-- 下面的功能区 -->
        <ul class="ul1">
            <li>
                <img src="./images/xc.png" alt="">
                <div class="xiangce">
                    <p>相册</p>
                </div>
            </li>
            <li>
                <img src="./images/ps.png" alt="">
                <div class="paishe">
                    <p>拍摄</p>
            </li>
            <li>
                <img src="./images/wz.png" alt="">
                <div class="weizhi">
                    <p>位置</p>
            </li>
            <li>
                <img src="./images/yy.png" alt="">
                <div class="yuyin">
                    <p>语音</p>
            </li>
        </ul>
        <ul class="ul2">
            <li>
                <img src="./images/sc.png" alt="">
                <div class="shoucang">
                    <p>收藏</p>
            </li>
            <li>
                <img src="./images/mp.png" alt="">
                <div class="mingpian">
                    <p>名片</p>
            </li>
            <li>
                <img src="./images/wj.png" alt="">
                <div class="wenjian">
                    <p>文件</p>
            </li>
            <li>
                <img src="./images/yyue.png" alt="">
                <div class="yinyue">
                    <p>音乐</p>
            </li>
        </ul>
    </div>

</div>

</body>

</html>